<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <link rel="stylesheet" href="css/register.css">
    <!-- 导入bootstrap样式-->
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="elementUI/elementCSS.css">
    <!--引入图标库-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!--引入element的图标库-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入layui样式-->
    <link href="//cdn.staticfile.net/layui/2.9.11/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="register-container" id="app"   >
    <div class="left-container">

    </div>
    <div class="right-container">
        <a href="/login.html" style=" color: rgb(141 0 0);text-decoration: underline; ">已有账号？点此登录</a>
        <h2>注册</h2>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" v-model="username" id="username" name="username">
            <span id="username-error" v-cloak v-show="usernameError" style="color:red;">{{usernameErrorText}}</span>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" v-model="password" id="password" name="password">
            <span id="password-error"  v-cloak v-show="passwordError" style="color:red;">{{passwordErrorText}}</span>
        </div>
        <div class="form-group">
            <label for="fullname">姓名</label>
            <input type="text" id="fullname" v-model="name" name="fullname">
        </div>
        <button class="btn btn-info" @click="register">注册</button>
        <button class="btn btn-danger" type="reset">清空</button>
    </div>

</div>

<script src="js/jquery-3.7.1.js"></script>
<script src="js/vue.js"></script>
<script src="elementUI/elementJS.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="//cdn.staticfile.net/layui/2.9.11/layui.js"></script>
<script src="js/register.js"></script>

<script>
    // 获取元素
    var username = document.getElementById("username");
    var password = document.getElementById("password");
    var fullname = document.getElementById("fullname");
    // 获取焦点时边框变色,边框变粗
    username.addEventListener("focus", function () {
        this.style.borderColor = "red";
        this.style.borderWidth = "2px";
    });
    password.addEventListener("focus", function () {
        this.style.borderColor = "red";
        this.style.borderWidth = "2px";
    });
    fullname.addEventListener("focus", function () {
        this.style.borderColor = "red";
        this.style.borderWidth = "2px";
    });

    // 失去焦点时边框变色
    username.addEventListener("blur", function () {
        this.style.borderColor = "black";
        this.style.borderWidth = "1px";
    });
    password.addEventListener("blur", function () {
        this.style.borderColor = "black";
        this.style.borderWidth = "1px";
    });
    fullname.addEventListener("blur", function () {
        this.style.borderColor = "black";
        this.style.borderWidth = "1px";
    });

</script>

</body>
</html>
